<script setup>
import { ref } from 'vue'
import { getLineAdjustmentApi } from '@/apis/user'
import { showToast } from 'vant'

const props = defineProps({
  overview_id: Number
})

const prolist = ref([])

const getLineAdjustment = async () => {
  const res = await getLineAdjustmentApi(props.overview_id)
  // console.log(res)
  if (res.data.code == 200) {
    let list = res.data.data.info.details
    prolist.value = []
    list.forEach((item, index) => {
      let colorby = ''
      switch (item.new_description) {
        case 'Degreasing': // 脱脂
          colorby = '1'
          break
        case 'Acid Pickling': // 酸洗
          colorby = '2'
          break
        case 'Thin Film': // 硅烷
          colorby = '3'
          break
        case 'Passivation': // 钝化
          colorby = '3'
          break
        case 'Phosphating': // 磷化
          colorby = '4'
          break
        case 'Saponification': // 皂化
          colorby = '5'
          break
        case 'Lubrication': // 润滑
          colorby = '5'
          break
        case 'Reactive Oil': // 拉拔油
          colorby = '5'
          break
        case 'VIANT':
          colorby = '6'
          break
        case 'Rinsing': // 水洗
          colorby = '0'
          break
        case 'Hot water cleaning': // 热水洗
          colorby = '0'
          break
        default:
          colorby = '0'
          break
      }
      // 拼接问题建议数组
      let problems = []
      for (let i = 0; i < item.new_problem.length; i++) {
        let pinfo = {
          problem: item.new_problem[i],
          suggestion: item.new_suggestion[i],
          images: item.images[i]
        }
        problems.push(pinfo)
      }
      let havesug = ref(false)
      if (item.new_problem.length == 1) {
        item.new_suggestion[0] == '' ? (havesug.value = false) : (havesug.value = true)
      }
      if (item.new_problem.length >= 2) {
        for (let i = 0; i < item.new_problem.length; i++) {
          item.new_suggestion[i] == '' && item.new_suggestion[i + 1] == ''
            ? (havesug.value = false)
            : (havesug.value = true)
        }
      }
      let info = {
        id: 's' + index + 1,
        name: item.new_description,
        suglist: problems,
        issug: havesug.value,
        ischeck: false,
        jtshow: index < list.length - 1 ? true : false,
        proimg: new URL(`../../assets/img/color_${colorby}_1.png`, import.meta.url).href
      }
      prolist.value.push(info)
    })
    // console.table(prolist.value);
  } else {
    showToast(res.data.msg)
  }
}

getLineAdjustment()

let checkimg = ref(false)

let showImgList = ref([])

const toCheck = (imglist) => {
  checkimg.value = true
  showImgList.value = imglist
}
</script>

<template>
  <div class="suggestbox clmstart">
    <div class="sitem" v-for="item in prolist" :key="item.id">
      <div class="siteminfo">
        <div class="itemstepbox clmcenter">
          <p class="stepname">{{ item.name }}</p>
          <div class="stepimgbox clmcenter">
            <img :src="item.proimg" class="stepimg" />
          </div>
        </div>
        <div class="checkbox" v-if="item.issug">
          <div class="check_before" v-if="!item.ischeck">
            <img src="@/assets/img/jt_short.png" class="jt_short" />
            <div class="checkbtnbox">
              <button type="button" @click="item.ischeck = true">View suggestions</button>
              <img src="@/assets/img/magnifier.png" class="magnifier" />
            </div>
          </div>
          <div class="check_after" v-else>
            <van-swipe class="swipe" indicator-color="#004f93" :loop="false">
              <van-swipe-item v-for="sitem in item.suglist" :key="sitem.index">
                <div class="problembox checkwrap">
                  <div class="wrapborder"></div>
                  <div class="protitlebox checktitle">Issue</div>
                  <div class="checkcont">{{ sitem.problem }}</div>
                </div>
                <div class="casebox checkwrap">
                  <div class="wrapborder"></div>
                  <div class="casetitlebox checktitle">Suggestion</div>
                  <div class="checkcont">
                    {{ sitem.suggestion }}
                  </div>
                </div>
                <div class="checkbtnbox" v-show="sitem.images?.length">
                  <button type="button" @click="toCheck(sitem.images)">View picture</button>
                </div>
              </van-swipe-item>
            </van-swipe>
            <div class="checkbtnbox shoubtnbox">
              <button type="button" @click="item.ischeck = false">Click to fold</button>
            </div>
          </div>
        </div>
        <div class="nocheck" v-else>
          <img src="@/assets/img/jt_long.png" class="jt_long" />
          <img src="@/assets/img/gou.png" class="nocheck_gou" />
        </div>
      </div>
      <img
        src="@/assets/img/jt_down.png"
        class="jt_down"
        v-show="item.jtshow"
        :style="{ marginTop: item.ischeck ? '-200px' : '0px' }"
      />
    </div>
  </div>
  <!-- 查看图片 -->
  <div class="checkimgtkbox clmcenter" v-show="checkimg">
    <img src="@/assets/img/close.png" class="close" @click="checkimg = false" />
    <van-swipe class="my-swipe" indicator-color="#ffffff">
      <van-swipe-item v-for="item in showImgList" :key="item">
        <img :src="item" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<style lang="scss" scoped>
.suggestbox {
  position: relative;
  width: 572px;
  margin: 50px auto -30px;
  font-size: 1.78rem;
  font-family: 'Helvetica';
  .sitem {
    width: 100%;
    margin-bottom: 15px;
    text-align: left;
    .siteminfo {
      display: flex;
      .itemstepbox {
        position: relative;
        width: 161px;
        height: 161px;
        background: url('@/assets/img/cxitembg.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        .stepname {
          font-weight: bold;
        }
        .stepimgbox {
          position: relative;
          width: 130px;
          margin-top: 20px;
          .stepimg {
            width: 100%;
          }
        }
      }
      .check_before,
      .nocheck {
        display: flex;
        justify-content: center;
        align-items: center;
        .jt_short,
        .checkbtnbox,
        .jt_long,
        .nocheck_gou {
          margin-left: 26px;
        }
      }
      .checkbox {
        .check_before {
          height: 100%;
          .jt_short {
            width: 106px;
            height: 33px;
          }
          .checkbtnbox {
            position: relative;
            height: 85px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            button {
              border: none;
              padding: 0 10px;
              height: 33px;
              border-radius: 16px;
              background: #004f93;
              cursor: pointer;
              color: #ffffff;
              text-align: center;
            }
            .magnifier {
              position: absolute;
              right: -60px;
              top: 8px;
              width: 92px;
              height: 85px;
            }
          }
        }
        .check_after {
          margin-left: 26px;
          width: 376px;
          .checkwrap {
            position: relative;
            width: 100%;
            min-height: 36px;
            border-top-left-radius: 20px;
            clip-path: inset(0 round 20px 0 0 0);
            overflow-x: hidden;
            font-weight: bold;
            margin-bottom: 25px;
            .checktitle {
              height: 37px;
              color: #ffffff;
              text-align: left;
              line-height: 1.4;
              padding-left: 16px;
              margin-top: -1px;
              margin-left: -1px;
            }
            .checkcont {
              padding: 10px 8px 16px;
              color: #000000;
              line-height: 1.4;
              font-weight: normal;
            }
          }
          .problembox {
            background-color: rgba($color: #5469f6, $alpha: 0.2);
            border: 2px solid #5469f6;
            box-sizing: border-box;
            .protitlebox {
              width: 97px;
              clip-path: polygon(0 0, 80px 0, 100% 17px, 80px 100%, 0 100%, 0 0);
              background-image: linear-gradient(to right, #5468f6, #5d90e3);
            }
          }
          .casebox {
            margin-top: 25px;
            background-color: rgba($color: #db7046, $alpha: 0.2);
            border: 2px solid #db7046;
            .casetitlebox {
              width: 170px;
              clip-path: polygon(0 0, 153px 0, 100% 17px, 153px 100%, 0 100%, 0 0);
              background-image: linear-gradient(to right, #db7046, #a62444);
            }
          }
          .checkbtnbox {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            button {
              border: none;
              background-color: #004f93;
              color: #ffffff;
              padding: 3px 20px;
              border-radius: 16px;
            }
          }
          .shoubtnbox {
            justify-content: flex-end;
          }
        }
      }
      .nocheck {
        .jt_long {
          width: 257px;
          height: 35px;
        }
        .nocheck_gou {
          width: 94px;
          height: 93px;
        }
      }
    }
    .jt_down {
      margin-left: 70px;
    }
  }
}
.checkimgtkbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  .close {
    align-self: flex-end;
    margin-right: 10%;
    width: 55px;
    margin-top: 10%;
  }
  .my-swipe {
    width: 100%;
    height: 500px;
    margin-top: 30px;
    .van-swipe-item {
      img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
      }
    }
  }
}
</style>
